import React from 'react';

/**
 * 用户列表组件属性接口
 * @interface UserListProps
 * @property {string} currentUser - 当前登录用户
 * @property {string[]} onlineUsers - 在线用户列表
 * @property {string} selectedUser - 选中的用户
 * @property {function(string): void} onUserSelect - 用户选择回调函数
 * @property {function(): void} onLogout - 退出登录回调函数
 * @property {boolean} isConnected - WebSocket连接状态
 */
export interface UserListProps {
  currentUser: string;
  onlineUsers: string[];
  selectedUser: string;
  onUserSelect: (username: string) => void;
  onLogout: () => void;
  isConnected: boolean;
}

const UserList: React.FC<UserListProps> = ({
  currentUser,
  onlineUsers,
  selectedUser,
  onUserSelect,
  onLogout,
  isConnected
}) => {
  return (
    <div className="user-list">
      <div className="user-list-header">
        <h3>在线用户</h3>
        <div className="current-user">
          当前用户: {currentUser}
          <span 
            style={{
              display: 'inline-block',
              width: '8px',
              height: '8px',
              borderRadius: '50%',
              backgroundColor: isConnected ? '#4caf50' : '#f44336',
              marginLeft: '8px'
            }}
            title={isConnected ? '已连接' : '未连接'}
          />
        </div>
        <button 
          onClick={onLogout}
          style={{
            marginTop: '10px',
            padding: '8px 16px',
            background: '#f44336',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '12px'
          }}
        >
          退出登录
        </button>
      </div>
      
      <div className="user-list-items">
        {onlineUsers.length === 0 ? (
          <div style={{ 
            padding: '20px', 
            textAlign: 'center', 
            color: '#666',
            fontStyle: 'italic' 
          }}>
            暂无其他在线用户
          </div>
        ) : (
          onlineUsers.map((user) => (
            <div
              key={user}
              className={`user-item ${selectedUser === user ? 'active' : ''}`}
              onClick={() => onUserSelect(user)}
            >
              <div className="online-indicator"></div>
              <div>
                <div style={{ fontWeight: '500' }}>{user}</div>
                <div style={{ fontSize: '12px', color: '#666' }}>在线</div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export default UserList;